<template>
  <div class="leave-approved-wrapper">
    <div class="leave-approved-header-wrapper">
      <div class="leave-approved-header-search-wrapper">
        <span class="leave-approved-header-progress-selector-span">选择课程 : </span>
        <el-select class="leave-approved-header-progress-selector"
                   v-model="selectedCourse"
                   @change="onSelectedCourseChanged"
                   placeholder="请选择课程">
          <el-option
                  v-for="item in course"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="leave-approved-table-wrapper">
      <el-table
              class="leave-approved-table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="leaveRecords"
              :row-class-name="tableRowClassName">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="leave-table-expand">
              <el-form-item label="申请课程">
                <span>{{ props.row.course.name }}</span>
              </el-form-item>
              <el-form-item label="授课老师">
                <span>{{ props.row.teacher.name }}</span>
              </el-form-item>
              <el-form-item label="申请人">
                <span>{{ props.row.studentName }}</span>
              </el-form-item>
              <el-form-item label="请假时间">
                <span>{{ props.row.leaveTime }}</span>
              </el-form-item>
              <el-form-item label="审批状态">
                <el-tag v-if="props.row.progress === 1"
                        type="info">待审批</el-tag>
                <el-tag v-if="props.row.progress === 2"
                        type="success">已同意</el-tag>
                <el-tag v-if="props.row.progress === 3"
                        type="danger">已拒绝</el-tag>
              </el-form-item>
              <el-form-item label="请假理由">
                <span>{{ props.row.reason }}</span>
              </el-form-item>
              <el-form-item label="教师留言">
                <span>{{ props.row.message }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="110">
        </el-table-column>
        <el-table-column
                prop="studentName"
                label="申请学生"
                width="200">
        </el-table-column>
        <el-table-column
                prop="course.name"
                label="申请课程"
                width="230">
        </el-table-column>
        <el-table-column
                prop="leaveTime"
                label="请假时间"
                width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.leaveTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="progress"
                label="审批状态">
          <template slot-scope="props">
            <el-tag v-if="props.row.progress === 1"
                    effect="dark"
                    type="info">待审批</el-tag>
            <el-tag v-if="props.row.progress === 2"
                    effect="dark"
                    type="success">已同意</el-tag>
            <el-tag v-if="props.row.progress === 3"
                    effect="dark"
                    type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="leave-approved-table-pagination-wrapper">
        <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "LeaPending",
    data() {
      return {
        apply: 3,
        loading: false,
        leaveRecords: [],
        studentId: 1,
        dialogFormVisible: false,
        currentPage: 1,
        total: 0,
        size: 10,
        teacherIdByUser: null,
        course: [],
        selectedCourse: null,
        leaveApply: {
          studentId: 1,
          studentName: '汪子洋',
          teacherId: null,
          courseId: null,
          leaveTime: '',
          reason: '',
          message: '',
          status: '待定',
          progress: 1
        },
        progress: [
          {
            id: 1,
            name: '待审批'
          },
          {
            id: 2,
            name: '已同意'
          },
          {
            id: 3,
            name: '已拒绝'
          }
        ]
      }
    },
    mounted() {
      this.initTeacherIdByUser()
      this.getLeaveRecords()
      this.getCoursesByTeacher()
    },
    methods: {
      //  当header中的course selector改变时重新获取leave记录
      onSelectedCourseChanged() {
        this.loading = true
        this.getRequest('/leamanagement/handle/approved/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&progress=' + 2
            + '&teacherId=' + this.teacherIdByUser
            + '&courseId=' + this.selectedCourse).then(resp => {
          if (resp) {
            this.leaveRecords = resp.data
            this.total = resp.total
          }
          this.loading = false
        })
      },
      //  根据老师id获取课程
      getCoursesByTeacher() {
        this.getRequest('/leamanagement/handle/approved/course/' + this.teacherIdByUser).then(resp => {
          if (resp) {
            this.course = resp
          }
        })
      },
      //  根据progress指定每条记录的额外的样式
      tableRowClassName({row}) {
        if (row.progress === 1) {
          return '';
        } else if (row.progress === 2) {
          return 'success-row';
        } else if (row.progress === 3) {
          return 'warning-row';
        }
        return '';
      },
      //  获取请假记录
      getLeaveRecords() {
        this.loading = true
        this.getRequest('/leamanagement/handle/approved/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&progress=' + 2
            + '&teacherId=' + this.teacherIdByUser).then(resp => {
          if (resp) {
            this.leaveRecords = resp.data
            this.total = resp.total
          }
          this.loading = false
        })
      },
      //  当分页组件的每页显示多少条数据改变时
      sizeChange(size) {
        this.size = size
        this.currentPage = 1
        this.getLeaveRecords()
      },
      //  当分页组件的页数改变时
      currentChange(currentPage) {
        this.currentPage = currentPage
        this.getLeaveRecords()
      },
      //  获取当前操作系统的老师的id
      initTeacherIdByUser() {
        let user = JSON.parse(window.sessionStorage.getItem('user'))
        this.teacherIdByUser = user.teacherId
      }
    }
  }
</script>

<style lang="less">

  .leave-approved-wrapper {
    width: 95%;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 40px;

    .leave-approved-header-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      box-sizing: border-box;
      padding: 20px 40px;
      /*background-color: #EBEEF5;*/
      height: 80px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;

      .leave-approved-header-search-wrapper {

        .leave-approved-header-progress-selector-span {
          font-size: 18px;
        }

        .leave-approved-header-progress-selector {
          width: 180px;
        }
      }
    }

    .leave-approved-table-wrapper {
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      padding: 5px 20px 20px 20px;

      .leave-approved-table {

        .leave-approved-table .warning-row {
          background: oldlace;
        }

        .leave-approved-table .success-row {
          background: #f0f9eb;
        }

        .leave-table-expand {
          font-size: 0;
          background-color: #EDF2FC;
          padding: 20px;
        }

        .leave-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
        .leave-table-expand .el-form-item {
          margin-right: 0;
          margin-bottom: 0;
          width: 50%;
        }
      }

      .leave-approved-table-pagination-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
  .el-table .warning-row {
    background: #fef0f0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>